<template>
	<view class="course-list-container">
		<!-- 固定在顶部的导航栏 -->
		<view class="top-nav fixed-nav" :class="{'nav-shadow': showShadow}">
			<image class="back-icon" src="/static/back1.png" @click="handleBack"></image>
			<text class="nav-title">前端开发</text>
			<view class="nav-right">
				<image class="search-icon" src="/static/search.png"></image>
				<image class="cart-icon" src="/static/cart1.png"></image>
			</view>
		</view>

		<!-- 占位元素，避免内容被固定导航栏遮挡 -->
		<view class="placeholder"></view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view 
				class="filter-item" 
				:class="{ 'active': activeFilter === 'vue' }"
				@click="handleFilterClick('vue')"
			>
				<text class="filter-text">Vue.js</text>
				<image class="arrow-icon" src="/static/arrow-down.png"></image>
			</view>
			<view 
				class="filter-item" 
				:class="{ 'active': activeFilter === 'difficulty' }"
				@click="handleFilterClick('difficulty')"
			>
				<text class="filter-text">课程难度</text>
				<image class="arrow-icon" src="/static/arrow-down.png"></image>
			</view>
			<view 
				class="filter-item" 
				:class="{ 'active': activeFilter === 'all' }"
				@click="handleFilterClick('all')"
			>
				<text class="filter-text">全部课程</text>
				<image class="arrow-icon" src="/static/arrow-down.png"></image>
			</view>
		</view>

		<!-- 排序栏 -->
		<view class="sort-bar">
			<view style="display: flex;justify-content: center;align-items: center;">
				<view 
					class="sort-item" 
					:class="{ 'active': activeSort === 'newest' }"
					@click="handleSortClick('newest')"
				>
					最新
				</view>
				<view 
					class="sort-item" 
					:class="{ 'active': activeSort === 'hottest' }"
					@click="handleSortClick('hottest')"
					style="margin-left: 30rpx;"
				>
					最热
				</view>
			</view>
			<view class="sort-item1">
				<text style="position: relative;top: 5rpx;">仅显示未学</text>
				<switch class="unlearn-switch" />
			</view>
		</view>

		<!-- 课程列表 -->
		<scroll-view 
			class="course-list-scroll" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="loadMore"
		>
			<view class="course-list">
				<view class="course-item" v-for="(course, index) in courseList" :key="course.id || index">
					<image class="course-cover" :src="course.cover" mode="aspectFill"></image>
					<view class="course-info">
						<text class="course-title">{{ course.title }}</text>
						<view class="teacher-level">
							<text class="teacher">{{ course.teacherId }}</text>
							<text class="level">{{ getLevelText(course.level) }}</text>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<text class="course-price">{{ course.price === 0 ? '免费课' : '¥' + course.price }}</text>
							<text class="learn-count">{{ course.buyCount || 0 }}人学习</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多提示 -->
				<view class="load-more">
					<text v-if="loading" class="loading-text">加载中...</text>
					<text v-else-if="hasMore" class="load-more-text" @click="loadMore">点击加载更多</text>
					<text v-else class="no-more-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [], // 课程列表数据
				pageNum: 1, // 当前页码
				pageSize: 5, // 每页显示数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				hasMore: true, // 是否有更多数据
				triggered: false, // 下拉刷新状态
				activeFilter: '', // 当前激活的筛选项
				activeSort: 'newest', // 当前激活的排序项
				showShadow: false // 导航栏是否显示阴影
			};
		},
		onLoad() {
			this.getCourseList();
		},
		onPageScroll(e) {
			// 当页面滚动时显示导航栏阴影
			this.showShadow = e.scrollTop > 10;
		},
		methods: {
			// 获取课程列表
			async getCourseList() {
				if (this.loading) return;
				
				this.loading = true;
				try {
					// 使用Promise方式调用uni.request
					const [error, res] = await new Promise((resolve) => {
						uni.request({
							url: 'http://47.113.230.113:8088/course/list',
							method: 'GET',
							data: {
								pageNum: this.pageNum,
								pageSize: this.pageSize
							},
							success: (res) => resolve([null, res]),
							fail: (error) => resolve([error, null])
						});
					});
					
					if (error) {
						throw error;
					}
					
					// 检查响应数据结构
					if (res.data && res.data.status === 200) {
						const data = res.data.data;
						this.total = data.total || 0;
						
						if (this.pageNum === 1) {
							this.courseList = data.data || [];
						} else {
							this.courseList = [...this.courseList, ...(data.data || [])];
						}
						
						// 判断是否还有更多数据
						this.hasMore = this.courseList.length < this.total;
					} else {
						console.error('API响应格式错误:', res);
						uni.showToast({
							title: '数据加载失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.triggered = false;
				}
			},
			
			// 下拉刷新
			onRefresh() {
				if (this.loading) return;
				
				this.triggered = true;
				this.pageNum = 1;
				this.getCourseList();
			},
			
			// 上拉加载更多
			loadMore() {
				if (this.loading || !this.hasMore) return;
				
				this.pageNum++;
				this.getCourseList();
			},
			
			handleBack() {
				uni.navigateBack();
			},
			
			// 筛选项点击事件
			handleFilterClick(filterType) {
				this.activeFilter = filterType;
				// 重置分页并重新加载数据
				this.pageNum = 1;
				this.getCourseList();
			},
			
			// 排序项点击事件
			handleSortClick(sortType) {
				this.activeSort = sortType;
				// 重置分页并重新加载数据
				this.pageNum = 1;
				this.getCourseList();
			},
			
			// 根据难度值获取文本
			getLevelText(level) {
				const levels = {
					0: '零基础',
					1: '初阶',
					2: '进阶',
					3: '高阶'
				};
				return levels[level] || '未知';
			}
		}
	};
</script>

<style>
	.course-list-container {
		background-color: #ffffff;
		min-height: 100vh;
		font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
		position: relative;
	}

	/* 固定在顶部的导航栏 */
	.fixed-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #ffffff;
		transition: box-shadow 0.3s;
	}
	
	.nav-shadow {
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.placeholder {
		height: 90rpx;
	}

	.top-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 90rpx;
		box-sizing: border-box;
		margin-top: 160rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.nav-right {
		display: flex;
		gap: 30rpx;
	}

	.search-icon,
	.cart-icon {
		width: 50rpx;
		height: 50rpx;
	}

	/* 筛选栏 */
	.filter-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		gap: 40rpx;
		margin-top: 170rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
		padding: 10rpx 15rpx;
		border-radius: 20rpx;
		cursor: pointer;
	}

	.filter-item.active {
		color: #ff0000;
		background-color: #fef0f0;
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
		margin-left: 8rpx;
	}

	/* 排序栏 */
	.sort-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		gap: 30rpx;
	}

	.sort-item {
		font-size: 28rpx;
		color: #666666;
		padding: 8rpx 32rpx;
		border-radius: 30rpx;
		border: 1rpx solid gray;
		cursor: pointer;
	}

	.sort-item.active {
		color: #ff0000;
		border: 1rpx solid #ff0000;
	}

	.unlearn-switch {
		transform: scale(0.8);
		margin-left: 10rpx;
	}

	/* 课程列表滚动区域 */
	.course-list-scroll {
		height: calc(100vh - 300rpx);
	}

	/* 课程列表美化 */
	.course-list {
		padding: 20rpx 30rpx;
	}

	.course-item {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.course-cover {
		width: 200rpx;
		height: 230rpx;
		border-radius: 10rpx;
		object-fit: cover;
		flex-shrink: 0;
	}

	.course-info {
		margin-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 230rpx;
	}

	.course-title {
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
		line-height: 40rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.teacher-level {
		display: flex;
		gap: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		flex-wrap: wrap;
	}

	.teacher {
		font-size: 24rpx;
		color: #999999;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.level {
		font-size: 24rpx;
		color: #999999;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		background-color: #f0f8ff;
	}

	.course-price {
		font-size: 28rpx;
		color: #ff0000;
		font-weight: bold;
	}

	.learn-count {
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 加载更多样式 */
	.load-more {
		text-align: center;
		padding: 30rpx 0;
	}
	
	.loading-text, .load-more-text, .no-more-text {
		font-size: 26rpx;
		color: #999;
	}
	
	.load-more-text {
		color: #007AFF;
	}
</style>